<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2022-11-18 18:44:30
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-30 14:44:44
-->
<template>
  <div class="login-page">
    <div class="lg-left">
      <img class="swarm-icon" src="../../../common/assets/images/kangni_logo1.jpg" />
      <span class="swarm-txt">供应商管理系统</span>
      <div class="lg-left-info">
        <div class="title">
          智能制造,<br />
          创造便捷生活！
        </div>
        <div class="desc">
          最值得信赖的软件与信息技术服务提供商
          <br />卓越的人才服务提供商 <br />领先的企业数字化转型方案提供商
        </div>
      </div>
      <!--  底部  -->
      <div class="el-login-footer">
        <span> 版权所有 © 南京康尼科技实业有限公司 </span>
      </div>
    </div>
    <div class="lg-right">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="密码登录" name="first"></el-tab-pane>
        <el-tab-pane label="验证码登录" name="second"></el-tab-pane>
      </el-tabs>
      <div class="login-content">
        <password-in v-show="activeName === 'first'" ref="passwordInCom" @handleLoginSucess="goHome" />
        <code-in v-show="activeName === 'second'" ref="codeInCom" @handleLoginSucess="goHome" />
      </div>
    </div>
  </div>
</template>
<script>
  import { mapActions } from 'pinia'
  import { pinias } from '@/common/pinia'
  import PasswordIn from '../components/passwordIn.vue'
  import CodeIn from '../components/codeIn.vue'

  const { login } = pinias
  export default {
    name: 'LoginView',
    components: { PasswordIn, CodeIn },
    data() {
      return {
        loading: false,
        activeName: 'first'
      }
    },
    methods: {
      ...mapActions(login, ['LoginIn']),
      handleClick(tab) {
        this.activeName = tab.name
      },
      goHome() {
        this.$router.push({ path: '/home' })
      }
    }
  }
</script>
<style lang="scss">
  .lg-right {
    .el-tabs {
      width: 314px;

      .el-tabs__nav {
        width: 100%;
      }

      .el-tabs__item {
        width: 50%;
        text-align: center;
      }

      .el-tabs__active-bar {
        width: 50% !important;
      }
    }
  }

  .login-content {
    margin-top: 40px;

    .el-form-item {
      margin-bottom: 20px;
    }
  }
</style>
<style lang="scss" scoped>
  @import '../style/login';
</style>
